/// Example of a stacked area chart with custom area colors.
///
/// By default, the area skirt for a chart will be drawn with the same color as
/// the line, but with a 10% opacity assigned to it. An area color function can
/// be provided to override this with any custom color.
// import 'package:charts_flutter/flutter.dart' as charts;
import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter_echarts/flutter_echarts.dart';

class EchartPage extends StatefulWidget {
  final List<String?> timeArr;
  final List<int?> faultArr;
  final List<int?> onArr;
  const EchartPage({super.key, required this.timeArr, required this.faultArr, required this.onArr});
  @override
  State<EchartPage> createState() => _EchartPageState();
}

class _EchartPageState extends State<EchartPage> {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width,
      height: 250,
      child: Echarts(
        option: jsonEncode({
          "grid": {
            "left": "2%",
            "right": "3%",
            "top": "13%",
            "bottom": "0",
            "containLabel": true,
          },
          "legend": {
            "show": true,
            "left": "15%",
            "top": "-1%",
            "lineStyle": {
              "type": "solid",
            },
            "textStyle": {
              "color": "rgba(200, 217, 232, 1)",
              "fontSize":12,
            },
            "data": ["今日故障率", "今日亮灯率"],
          },
          "xAxis": {
            //X轴数据
            "type": "category",
            "boundaryGap": false,
            "axisLabel": {
              "textStyle": {
                "fontSize": 12,
                "color": "#fff",
              },
              "margin": 10,
            },
            "axisLine": {
              "show": true,
              "lineStyle": {
                "color": "#CCF8F9",
                "type": "solid",
                "opacity": 0.5,
              },
            },
            "data": widget.timeArr,
          },
          "yAxis": [
            {
              "name": "单位（辆）",
              "nameTextStyle": {
                "color": "rgba(255, 255, 255, .5)", // 字体颜色
                "fontSize":8,
                "fontWeight": "bold", // 字体粗细
                "fontFamily": "Arial", // 字体类型
                "align": "right", // 水平对齐方式，'left', 'center', 'right'
                "baseline": "middle", // 垂直对齐方式，'top', 'middle', 'bottom'
              },
              "type": "value",
              "axisLabel": {
                "textStyle": {
                  "fontSize": 10,
                  "color": "#EAECF0",
                },
                "margin": 10,
              },
              "splitLine": {
                "show": false,
                "lineStyle": {
                  "color": "#142750",
                  "type": "solid",
                },
              },
              "axisLine": {
                "show": false,
              },
            },
          ],
          "series": [
            {
              "name": "今日故障率",
              "type": "line",
              "symbol": "circle",
              "symbolSize": 6,
              "itemStyle": {
                "normal": {
                  "color": "#DFAF64",
                  "lineStyle": {
                    "color": "#DFAF64",
                  },
                  "label": {
                    "show": false,
                    "position": [12, -15],
                    "formatter": "{c}",
                    "textStyle": {
                      "color": "#DFAF64",
                      "fontSize": 20,
                    },
                  },
                  "areaStyle": {
                    "color": '#DBAC62',
                    "shadowColor": "#DBAC62",
                    "shadowBlur": 6,
                  },
                },
              },
              "data":  widget.onArr,
            },
            {
              "name": "今日亮灯率",
              "type": "line",
              "symbol": "circle",
              "symbolSize": 6,
              "itemStyle": {
                "normal": {
                  "color": "#4195F2",
                  "lineStyle": {
                    "color": "#4195F2",
                  },
                  "label": {
                    "show": false,
                    "position": [12, -15],
                    "formatter": "{c}",
                    "textStyle": {
                      "color": "#4195F2",
                      "fontSize": 10,
                    },
                  },
                  "areaStyle": {
                    "color": '#5A98D0',
                    "shadowColor": "#5A98D0",
                    "shadowBlur": 6,
                  },
                },
              },
              "data":  widget.faultArr,
            },
            // {	//对应点得值
            //   "name":"项目金额(万元)",
            //   "data":[820,932,901,934,1290,1330,1320],
            //   "barWidth": '50%',
            //   "type":"bar",
            //   "itemStyle":{
            //     "normal":{
            //       "barBorderRadius": 0,
            //       "color": {
            //         "type": 'linear',
            //         "x": 0,
            //         "y": 0,
            //         "x2": 0,
            //         "y2": 1,
            //         "colorStops": [
            //           {
            //             "offset": 0, "color": '#00feff',
            //           },
            //           {
            //             "offset": 1, "color": '#027eff',
            //           },
            //           {
            //             "offset": 1, "color": '#0286ff',
            //           },
            //         ],
            //       },
            //     },
            //   }
            // },
            // {	//对应点得值
            //   "name":"今日故障率",
            //   "data":[1,9,3,3,12,9,2],
            //   "yAxisIndex": '1',
            //   "smooth": true,   // 是否让线条圆滑显示
            //   "type":"line",
            //   "color": '#FF9800'
            //
            //   "itemStyle":{
            //     "normal": {
            //       "color": "#DFAF64",
            //       "lineStyle": {
            //         "color": "#DFAF64",
            //       },
            //       "label": {
            //         "show": false,
            //         "position": [12, -15],
            //         "formatter": "{c}",
            //         "textStyle": {
            //           "color": "#DFAF64",
            //           "fontSize": Math.floor(this.rate * 20),
            //         },
            //       },
            //       "areaStyle": {
            //         "color": new echarts.graphic.LinearGradient(
            //             0,
            //             0,
            //             0,
            //             1,
            //             [
            //               {
            //                 offset: 0,
            //                 color: "#D8A960",
            //               },
            //               {
            //                 offset: 1,
            //                 color: "#634716",
            //               },
            //             ],
            //             false
            //         ),
            //         "shadowColor": "#DBAC62",
            //         "shadowBlur": 10,
            //       },
            //     },
            //   },
            // },

            // {	//对应点得值
            //   "name":"今日亮灯率",
            //   "data":[21,9,3,3,12,9,2],
            //   "yAxisIndex": '1',
            //   "smooth": true,   // 是否让线条圆滑显示
            //   "type":"line",
            //   "color": '#FF9800'
            // },
          ]
        }),
      ),
    );
  }
}
